<template>
  <div>
    <top-bar></top-bar>
    <div class="v-switcher__header">
      <div class="v-switcher__header__tabs__wrap">
        <van-tabs v-model="active" swipeable>
          <van-tab v-for="item in List" :title="item.title" :key="item.id">
            <list></list>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import TopBar from "@/components/Header.vue";
import list from "./List.vue";
export default {
  data() {
    return {
      active: "0",
      List: [
        { id: "0", title: "全部", itemList: [{content:"01"},{content:"02"},{content:"03"}] },
        { id: "1", title: "动画", itemList: [{content:"11"},{content:"12"},{content:"13"}] },
        { id: "2", title: "番剧", itemList: [{content:"21"},{content:"22"},{content:"23"}] },
        { id: "3", title: "国创", itemList: [{content:"31"},{content:"32"},{content:"33"}] },
        { id: "4", title: "音乐", itemList: [{content:"41"},{content:"42"},{content:"43"}] },
        { id: "5", title: "舞蹈", itemList: [{content:"51"},{content:"52"},{content:"53"}] },
        { id: "6", title: "游戏", itemList: [{content:"61"},{content:"62"},{content:"63"}] },
        { id: "7", title: "知识", itemList: [{content:"71"},{content:"72"},{content:"73"}] },
      ],
    };
  },
  provide(){
      return{
          list:this.List,
          id:()=>this.active
      }
  },
  components: {
    TopBar,
    list,
  },
};
</script>

<style lang="less" scoped>
.v-switcher__header {
  height: 10.66667vw;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  .v-switcher__header__tabs__wrap {
    flex: 1;
    background-color: skyblue;
    font-size: 3.73333vw;
    height: 100%;
  }
  .v-switcher__header__after {
    display: inline-block;
  }
}
</style>
